﻿@using OA.AspNetCore.Html;
@using OA.Model;
@model OA.Model.SynergyForm
@{

    Layout = "~/Areas/Member/Views/Shared/_Layout.cshtml";
    string msg = ViewBag.Msg;
    string tips = string.Empty;
    if (!string.IsNullOrWhiteSpace(msg))
    {
        tips = $"layer.msg('{msg}');";
    }


    List<ExtendField> extendFields = ViewBag.ExtendFields;
    List<ExtendField> tableFields = ViewBag.TableFields;


}
<style type="text/css">
    .delete {
        cursor: pointer;
    }
</style>
<div class="layui-form layui-tab-content" style="padding:20px 40px 20px 0;">
    @using (Html.BeginForm(FormMethod.Post, htmlAttributes: new { @class = "layui-form", id = "myForm" }))
    {
        @Html.AntiForgeryToken()

        <div class="layui-form-item">
            @Html.LabelFor(model => model.Name, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.HiddenFor(model => model.ID)
                @Html.MyEditorFor(model => model.Name)
            </div>
        </div>

        <div class="layui-form-item">
            @Html.LabelFor(model => model.SynergyEmpID, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <input type="text" placeholder="请输入协作成员" class="layui-input autocomplete" value="">
                <table class="layui-table countersignTable">
                    <thead>
                        <tr><th>协作部门</th><th>协作岗位</th><th>协作人</th><th style="width:32px;">#</th></tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.SynergyEmployees.Count; i++)
                        {
                            CountersignEmployee item = Model.SynergyEmployees[i];
                            <tr data-id="@i" class="Countersign_@item.EmpID"><td>@item.DepatrmentName</td><td><input type="hidden" class="Status" value="@item.Status" name="SynergyEmployees[@i].Status" /><input type="hidden" value="@item.PositionID" name="SynergyEmployees[@i].PositionID" /> @item.PositionName</td><td>@item.EmpName <input type="hidden" value="@item.EmpID" name="SynergyEmployees[@i].EmpID" /></td><td><span class="delete">删除</span></td></tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">附加字段</label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col width="100">
                        <col width="120">
                        <col width="100">
                        <col width="100">
                        <col width="100">
                        <col width="110">
                        <col width="110">
                        <col>
                        <col width="80">
                        <col width="60">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <td title="(以下划线开头的字母或数字，建议长度3-10位)">属性</td>
                            <th>类型</th>
                            <th>提示</th>
                            <th style="color:red;">验证(★)</th>
                            <th>默认值</th>
                            <th>最小值/长度</th>
                            <th>最大值/长度</th>
                            <th>下拉数据源（逗号分割不同的值）</th>
                            <th>排序</th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.ListExtendField.Count; i++)
                        {
                            ExtendField item = Model.ListExtendField[i];
                            <tr data-id="@i">
                                <td>
                                    <input type="hidden" class="Status" name="ListExtendField[@i].Status" value="1" />
                                    <input type="text" value="@Model.ListExtendField[i].Name" name="ListExtendField[@i].Name" class="layui-input Name" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.ListExtendField[i].Attribute" name="ListExtendField[@i].Attribute" class="layui-input Name" />
                                </td>
                                <td>
                                    @Html.MyEditorFor(model => model.ListExtendField[i].Type, "ListExtendField[" + i.ToString() + "].")
                                </td>
                                <td>
                                    <input type="text" value="@Model.ListExtendField[i].Tips" name="ListExtendField[@i].Tips" class="layui-input Tips" />
                                </td>
                                <td>
                                    @Html.MyEditorFor(model => model.TableFields[i].IsRequired, "ListExtendField[" + i.ToString() + "].")
                                </td>
                                <td>
                                    <input type="text" value="@Model.ListExtendField[i].DefaultValue" name="ListExtendField[@i].DefaultValue" class="layui-input DefaultValue" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.ListExtendField[i].Min" name="ListExtendField[@i].Min" class="layui-input Min" />
                                </td>
                                <td>
                                    <input type="number" value="@Model.ListExtendField[i].Max" name="ListExtendField[@i].Max" class="layui-input Max" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.ListExtendField[i].Values" name="ListExtendField[@i].Values" class="layui-input Values" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.ListExtendField[i].Sort" name="ListExtendField[@i].Sort" class="layui-input Sort" />
                                </td>
                                <td>
                                    <span class="deleteItem">删除</span>
                                </td>
                            </tr>
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="11" style="text-align:center;color:red;">★属性填写规则：以下划线开头的字母或数字，建议长度3-10位  </td>
                        </tr>
                        <tr>
                            <td colspan="11" style="text-align:center;color:red;">★验证规则:格式 *|*或*，其中*可选择项为 required(必填),phone(手机号码),email,number(数字),identity(身份证),例如:required|phone  </td>
                        </tr>
                        <tr>
                            <td colspan="11" class="right_content"><button type="button" class="layui-btn layui-btn-normal addItem">增加一行</button></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">表单字段</label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col width="100">
                        <col width="100">
                        <col width="120">
                        <col width="100">
                        <col width="100">
                        <col width="100">
                        <col width="110">
                        <col width="110">
                        <col>
                        <col width="80">
                        <col width="60">
                    </colgroup>
                    <thead>
                        <tr>
                            <td>上级名称</td>
                            <th>名称</th>
                            <td title="(以双下划线开头的字母或数字，建议长度3-10位)">属性</td>
                            <th>类型</th>
                            <th>提示</th>
                            <th style="color:red;">验证(★)</th>
                            <th>默认值</th>
                            <th>最小值/长度</th>
                            <th>最大值/长度</th>
                            <th>下拉数据源（逗号分割不同的值）</th>
                            <th>排序</th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.TableFields.Count; i++)
                        {
                            <tr data-id="@i">
                                <td>
                                    <input type="text" value="@Model.TableFields[i].ParentName" name="TableFields[@i].ParentName" class="layui-input ParentName" />
                                </td>
                                <td>
                                    <input type="hidden" class="Status" name="TableFields[@i].Status" value="1" />
                                    <input type="text" value="@Model.TableFields[i].Name" name="TableFields[@i].Name" class="layui-input Name" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.TableFields[i].Attribute" name="TableFields[@i].Attribute" class="layui-input Name" />
                                </td>
                                <td>
                                    @Html.MyEditorFor(model => model.TableFields[i].Type, "TableFields[" + i.ToString() + "].")
                                </td>
                                <td>
                                    <input type="text" value="@Model.TableFields[i].Tips" name="TableFields[@i].Tips" class="layui-input Tips" />
                                </td>
                                <td>
                                    @Html.MyEditorFor(model => model.TableFields[i].IsRequired, "TableFields[" + i.ToString() + "].")
                                </td>
                                <td>
                                    <input type="text" value="@Model.TableFields[i].DefaultValue" name="TableFields[@i].DefaultValue" class="layui-input DefaultValue" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.TableFields[i].Min" name="TableFields[@i].Min" class="layui-input Min" />
                                </td>
                                <td>
                                    <input type="number" value="@Model.TableFields[i].Max" name="TableFields[@i].Max" class="layui-input Max" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.TableFields[i].Values" name="TableFields[@i].Values" class="layui-input Values" />
                                </td>
                                <td>
                                    <input type="text" value="@Model.TableFields[i].Sort" name="TableFields[@i].Sort" class="layui-input Sort" />
                                </td>
                                <td>
                                    <span class="deleteItem">删除</span>
                                </td>
                            </tr>
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="12" style="text-align:center;color:red;">★上级名称与名称的填写规则：如果表格只有1级表头，上级名称与名称请填写一致。当前软件只支持一级和二级表头 </td>
                        </tr>
                        <tr>
                            <td colspan="11" style="text-align:center;color:red;">★属性填写规则：以<span style="font-size:24px;color:#000;font-weight:bold;">双</span>下划线开头的字母或数字，建议长度3-10位  </td>
                        </tr>
                        <tr>
                            <td colspan="12" style="text-align:center;color:red;">★验证规则:格式 *|*或*，其中*可选择项为 required(必填),phone(手机号码),email,number(数字),identity(身份证),例如:required|phone  </td>
                        </tr>
                        <tr>
                            <td colspan="12" class="right_content"><button type="button" class="layui-btn layui-btn-normal addItem">增加一行</button></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align:right;">
                <button type="submit" class="layui-btn mySubmit" lay-submit="" lay-filter="myForm"> 提  交 </button>
            </div>
        </div>
    }
</div>
<script type="text/javascript" src="/Member/Home/GetDepartmentAndPosition"></script>
<script type="text/javascript" src="@ViewBag.OssUrl/front/js/department.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'element','layer','autocomplete'], function () {
		form = layui.form;
        layer = layui.layer;
        element = layui.element;

        autocomplete = layui.autocomplete;
        autocomplete.render({
            elem: $('.autocomplete'),
            url: '/Home/GetEmployees',
            cache: false,
            template_val: '{p:"{d.p}}",s:"{d.s}}",i:"{d.i}}",n:"{d.n}}",d:"{d.d}}",}',
            template_txt: '{{d.n}} <span class=\'layui-badge layui-bg-gray\'>{{d.d}}&nbsp;{{d.s}}&nbsp;{{d.n}}</span>',
            onselect: function (resp) {
                $('.autocomplete').val("");
                var trLength = $(".countersignTable tbody").find("tr").length;
                var indexStep = parseInt(trLength) + 1;
                if ($(".Countersign_" + resp.i).length > 0) return;
                $(".countersignTable tbody").append('<tr  data-id="' + trLength + '" class="Countersign_' + resp.i + '"><td><input type="hidden" class="Status" value="1" name="SynergyEmployees[' + trLength + '].Status"/><input type="hidden" value="' + resp.p + '" name="SynergyEmployees[' + trLength + '].PositionID"/>' + resp.d + '</td><td><input type="hidden" value="' + resp.i + '" name="SynergyEmployees[' + trLength + '].EmpID"/>' + resp.s + '</td><td>' + resp.n
                    + '</td><td><span class="delete">删除</span></td></tr>');
            }
        });
        autocomplete.render({
            elem: $('.autocomplete2'),
            url: '/Home/GetEmployees',
            cache: false,
            template_val: '{{d.d}}  {{d.s}}  {{d.n}}',
            template_txt: '{{d.n}} <span class=\'layui-badge layui-bg-gray\'>{{d.d}}&nbsp;{{d.s}}&nbsp;{{d.n}}</span>',
            onselect: function (resp) {

            }
        });

        autocomplete.render({
            elem: $('.autocomplete3'),
            url: '/Home/GetPositions',
            cache: false,
            template_val: '{{d.m}} {{d.n}}',
            template_txt: '{{d.m}} {{d.n}}',
            onselect: function (resp) {
                $(this).val(resp.d + " " + resp.s + " " + resp.n);
            }
        });

        autocomplete.render({
            elem: $('.autocomplete4'),
            url: '/Home/GetDepartments',
            cache: false,
            template_val: '{{d.n}}',
            template_txt: '{{d.n}}',
            onselect: function (resp) {

            }
        });
        form.on('submit(myForm)', function (data) {
            $(".mySubmit").prop("disabled", true);
            mySubmit();
            return false;
        });
        @Html.Raw(tips)
    });
    var myFrom = $("#myForm");
    function mySubmit() {
        $.ajax({
            url: myFrom.prop("action"),
            type: myFrom.prop("method"),
            data: myFrom.serialize(),
            dataType: "json",
            beforeSend: function () {
                layer.msg("正在提交，请稍后...");
            },
            error: function () {
                $(".mySubmit").prop("disabled", false);
            },
            complete: function () {

            },
            success: function (data) {
                if (data.State == 400) {
                    layer.msg(data.Msg);
                    $(".mySubmit").prop("disabled", false);
                    return;
                }
                if (data.State == 402) {
                    layer.msg(data.Msg);
                    $(".mySubmit").prop("disabled", false);
                    return;
                }
                else {
                    layer.msg(data.Msg);
                    window.parent.RefreshResultList();                    
                }
            }
        });
    }


    $(".addItem").click(function () {
        var my_tbody = $(this).parent().parent().parent().parent().find("tbody");
        var last = my_tbody.find("tr:last");
        var lastID = last.attr("data-id");
        var currentIndex = parseInt(lastID) + 1;
        var outerHTML = last.prop('outerHTML');
        var reg = new RegExp("\\[" + lastID + "\\]", "g");
        outerHTML = outerHTML.replace('data-id="' + lastID + '"', 'data-id="' + currentIndex + '"');
        outerHTML = outerHTML.replace(reg, "[" + currentIndex + "]");
        my_tbody.append(outerHTML);
        my_tbody.find("tr:last").css("display", "");
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    });

    $(document).on("click", ".delete", function () {
        $(this).parent().parent().find("input").addClass(".isHidden").removeClass("mydate");
        $(this).parent().parent().find("input").val("0");
        $(this).parent().parent().find(".Status").val("-1");
        $(this).parent().parent().find("input").removeAttr("lay-verify");
        $(this).parent().parent().css("display", "none");
    });


    $(document).on("click", ".deleteItem", function () {
        $(this).parent().parent().css("display", "none");
        $(this).parent().parent().find(".Status").val("-1");
    });

</script>
